<template>
  <div id="app">
    <div style="width: 90%;margin: 100px 5% 0 5%;">
      <div style="width: 45%;float: left;text-align: left;">
        <dynamicTable :title="explanationTitle.title" :title2="explanationTitle.title2"
          :columns="explanationTitle.columns" :dataList="explanationTitle.dataList" />
        <dynamicTable :title="explanationBody.title" :title2="explanationBody.title2" :columns="explanationBody.columns"
          :dataList="explanationBody.dataList" />
        <json-viewer style="margin-top: 50px;" :value="datas" :expand-depth=5 copyable boxed sort></json-viewer>
      </div>
      <div style="width: 45%;position: fixed;right: 5%;" v-if="loading">
        <dynamicTable :title="datas.title" :title2="datas.title2" :columns="datas.columns" :dataList="datas.dataList" />
      </div>
    </div>
  </div>
</template>

<script>
import dynamicTable from "./components/dynamicTable/dynamicTable.vue"

export default {
  name: 'App',
  components: {
    dynamicTable
  },
  data() {
    return {
      explanationTitle: {
        "title": "",
        "columns": [
          {
            "title": "表头(columns)",
            "key": "param",
            "colspan": 3,
            "hasrowspan": false,
            "children": [{
              "title": "参数",
              "key": "param1",
              "colspan": 2,
              "hasrowspan": false,

            },
            {
              "title": "说明",
              "key": "param2",
              "colspan": 1,
              "hasrowspan": true,

            },
            {
              "title": "类型",
              "key": "param3",
              "colspan": 1,
              "hasrowspan": true,

            },
            {
              "title": "默认值",
              "key": "param4",
              "colspan": 1,
              "hasrowspan": true,

            }]
          },
          // {
          //   "title": "表头(columns)",
          //   "key": "param5",
          //   "colspan": 1,
          //   "hasrowspan": true,
          // }
        ],
        "dataList": [
          {
            "param1": [
              {
                "value": "title",
                "style": ""
              },
              {
                "value": "null",
                "style": ""
              }
            ],
            "param2": {
              "value": "表头名字",
              "style": ""
            },
            "param3": {
              "value": "String",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            },
            "param5": {
              "value": "-",
              "style": ""
            },
          },
          {
            "param1": [{
              "value": "key",
              "style": ""
            }, {
              "value": "null",
              "style": ""
            }],
            "param2": {
              "value": "指定表体映射字段",
              "style": ""
            },
            "param3": {
              "value": "String",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            }, "param5": {
              "value": "-",
              "style": ""
            },
          }, {
            "param1": [{
              "value": "hasrowspan",
              "style": ""
            }, {
              "value": "null",
              "style": ""
            }],
            "param2": {
              "value": "上下单元格相同是否合并",
              "style": ""
            },
            "param3": {
              "value": "Bloolean",
              "style": ""
            },
            "param4": {
              "value": "false",
              "style": ""
            }, "param5": {
              "value": "abc",
              "style": ""
            },
          }, {
            "param1": [{
              "value": "colspan",
              "style": ""
            }, {
              "value": "null",
              "style": ""
            }],
            "param2": {
              "value": "单元格宽度，有二级表头默认设置为children的长度。",
              "style": ""
            },
            "param3": {
              "value": "Number",
              "style": ""
            },
            "param4": {
              "value": "1",
              "style": ""
            }, "param5": {
              "value": "abc",
              "style": ""
            },
          }, {
            "param1": [{
              "value": "children",
              "style": ""
            }, {
              "value": "null",
              "style": ""
            }],
            "param2": {
              "value": "二级表头",
              "style": ""
            },
            "param3": {
              "value": "Array",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            }, "param5": {
              "value": "abc",
              "style": ""
            },
          }, {
            "param1": [{
              "value": "|__",
              "style": ""
            }, {
              "value": "title",
              "style": "color:red"
            }],
            "param2": {
              "value": "二级表头名字",
              "style": ""
            },
            "param3": {
              "value": "String",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            }, "param5": {
              "value": "abc",
              "style": ""
            },
          }, {
            "param1": [{
              "value": "|__",
              "style": ""
            }, {
              "value": "key",
              "style": "color:red"
            }],
            "param2": {
              "value": "指定表体映射字段",
              "style": ""
            },
            "param3": {
              "value": "String	",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            }, "param5": {
              "value": "abc",
              "style": ""
            },
          }, {
            "param1": [{
              "value": "|__",
              "style": ""
            }, {
              "value": "hasrowspan",
              "style": "color:red"
            }],
            "param2": {
              "value": "-",
              "style": ""
            },
            "param3": {
              "value": "Bloolean",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            }, "param5": {
              "value": "abc",
              "style": ""
            },
          }, {
            "param1": [{
              "value": "|__",
              "style": ""
            }, {
              "value": "colspan",
              "style": "color:red"
            }],
            "param2": {
              "value": "单元格宽度",
              "style": ""
            },
            "param3": {
              "value": "Number",
              "style": ""
            },
            "param4": {
              "value": "1",
              "style": ""
            }, "param5": {
              "value": "abc",
              "style": ""
            },
          },
        ],
      },
      explanationBody:{
        "title": "",
        "columns": [
          {
            "title": "表体(dataList)",
            "key": "param",
            "colspan": 3,
            "hasrowspan": false,
            "children": [{
              "title": "参数",
              "key": "param1",
              "colspan": 2,
              "hasrowspan": false,

            },
            {
              "title": "说明",
              "key": "param2",
              "colspan": 1,
              "hasrowspan": true,

            },
            {
              "title": "类型",
              "key": "param3",
              "colspan": 1,
              "hasrowspan": true,

            },
            {
              "title": "默认值",
              "key": "param4",
              "colspan": 1,
              "hasrowspan": true,

            }]
          },
          // {
          //   "title": "表头(columns)",
          //   "key": "param5",
          //   "colspan": 1,
          //   "hasrowspan": true,
          // }
        ],
        "dataList": [
          {
            "param1": [
              {
                "value": "param",
                "style": ""
              },
              {
                "value": "null",
                "style": ""
              }
            ],
            "param2": {
              "value": "表头对应key",
              "style": ""
            },
            "param3": {
              "value": "Array / Object",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            },
            "param5": {
              "value": "-",
              "style": ""
            },
          },
          {
            "param1": [{
              "value": "|__",
              "style": ""
            }, {
              "value": "value",
              "style": ""
            }],
            "param2": {
              "value": "数值",
              "style": ""
            },
            "param3": {
              "value": "String",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            }, "param5": {
              "value": "-",
              "style": ""
            },
          }, {
            "param1": [{
              "value": "|__",
              "style": ""
            }, {
              "value": "style",
              "style": ""
            }],
            "param2": {
              "value": "样式",
              "style": ""
            },
            "param3": {
              "value": "String",
              "style": ""
            },
            "param4": {
              "value": "-",
              "style": ""
            }, "param5": {
              "value": "abc",
              "style": ""
            },
          },
        ],
      },
      datas: {
        "title": "",
        "columns": [
          {
            "title": "牌号",
            "key": "param1",
            "colspan": 2,
            "hasrowspan": true,
            "children": [{
              "title": "TC4",
              "key": "param1",
              "colspan": 2,
              "hasrowspan": true,

            }]
          },
          {
            "title": "锭号",
            "key": "param2",
            "colspan": 3,
            "hasrowspan": false,

            "children": [{
              "title": "xxx-xxxx",
              "key": "param2",
              "colspan": 3,
              "hasrowspan": false,

            }]
          },

          {
            "title": "混批号",
            "key": "param3",
            "colspan": 3,
            "hasrowspan": false,

            "children": [{
              "title": "xxx1",
              "key": "param3",
              "colspan": 1,
              "hasrowspan": false,

            }, {
              "title": "xxx2",
              "key": "param4",
              "colspan": 2,
              "hasrowspan": false,

            }]
          },
          {
            "title": "配料份数",
            "key": "param5",
            "colspan": 2,
            "hasrowspan": false,

            "children": []
          }
        ],
        "dataList": [
          {
            "param1": {
              "value": "物料种类",
              "style": "color:red"
            },
            "param2": [
              {
                "value": "Al-11Si",
                "style": "color:#009933"
              },
              {
                "value": "Al-60Mo",
                "style": "color:rgba(255, 165, 0, 0.6)"
              },
              {
                "value": "铝豆",
                "style": ""
              }
            ],
            "param3": [
              {
                "value": "null",
                "style": ""
              }
            ],
            "param4": [
              {
                "value": "null",
                "style": ""
              },
              {
                "value": "null",
                "style": ""
              }
            ],
            "param5": {
              "value": "null",
              "style": ""
            }
          },
          {
            "param1": {
              "value": "批号",
              "style": ""
            },
            "param2": [
              {
                "value": "/",
                "style": ""
              },
              {
                "value": "V20****83",
                "style": ""
              },
              {
                "value": "M2****2Mo",
                "style": ""
              }
            ],
            "param3": [
              {
                "value": "null",
                "style": ""
              }
            ],
            "param4": [
              {
                "value": "null",
                "style": ""
              },
              {
                "value": "null",
                "style": ""
              }
            ],
            "param5": {
              "value": "null",
              "style": ""
            }
          },
          {
            "param1": {
              "value": "第一次原料称重(☑kg □g)",
              "style": ""
            },
            "param2": [
              {
                "value": "3.71",
                "style": ""
              },
              {
                "value": "3.71",
                "style": ""
              },
              {
                "value": "7.73",
                "style": ""
              }
            ],
            "param3": [
              {
                "value": "null",
                "style": ""
              }
            ],
            "param4": [
              {
                "value": "null",
                "style": ""
              },
              {
                "value": "null",
                "style": ""
              }
            ],
            "param5": {
              "value": "null",
              "style": ""
            }
          },
          {
            "param1": {
              "value": "第一次原料称重(☑kg □g)",
              "style": ""
            },
            "param2": [
              {
                "value": "3.71",
                "style": ""
              },
              {
                "value": "3.71",
                "style": ""
              },
              {
                "value": "7.73",
                "style": ""
              }
            ],
            "param3": [
              {
                "value": "null",
                "style": ""
              }
            ],
            "param4": [
              {
                "value": "null",
                "style": ""
              },
              {
                "value": "null",
                "style": ""
              }
            ],
            "param5": {
              "value": "/",
              "style": ""
            }
          },
          {
            "param1": {
              "value": "第二次原料称重(☑kg □g)",
              "style": ""
            },
            "param2": [
              {
                "value": "3.71",
                "style": ""
              },
              {
                "value": "3.71",
                "style": ""
              },
              {
                "value": "7.73",
                "style": ""
              }
            ],
            "param3": [
              {
                "value": "null",
                "style": ""
              }
            ],
            "param4": [
              {
                "value": "null",
                "style": ""
              },
              {
                "value": "null",
                "style": ""
              }
            ],
            "param5": {
              "value": "/",
              "style": ""
            }
          }
        ],
        "require": null
      },
      loading: true,
    }
  },
  computed: {

  },
  watch: {
    datas(newVal) {
      this.loading = false
      setTimeout(() => {
        this.loading = true
      }, 1000)
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>
